<template>
  <view class="adv-strinput-container">
    <gd-input v-model="bindInputVal" ref="inputRef" v-click-outside="onClickOutside" clearable @clear="onClear">
      <template #prepend>
        <view style="margin: 0; padding: 0" :style="{ width: computedPrependWidth }">
          <el-select
            v-model="bindContentType"
            style="width: 60px; display: inline-block"
            @change="onChangeContentType"
            :disabled="disabledContentType"
          >
            <!-- TODO:暂时不支持原子组件 -->
            <el-option
              v-for="item in contentTypeOptions"
              :label="item.label"
              :value="item.value"
              :key="item.value"
              :disabled="item.value === 'AtomicComp'"
            ></el-option>
          </el-select>
          <gd-icon
            style="
              display: inline-block;
              float: right;
              line-height: 26px;
              height: 26px;
              border: 1px solid black;
              width: 40px;
              text-align: center;
            "
            v-if="bindContentType === 'Icon'"
            :icon-name="bindInputVal"
          ></gd-icon>
        </view>
      </template>
      <template #append>
        <view @click.stop.prevent="openDialog" style="cursor: pointer">高级</view>
      </template>
    </gd-input>
    <el-popover ref="popoverRef" :virtual-ref="inputRef" trigger="click" title="" virtual-triggering>
      <span>{{ bindInputVal }}</span>
    </el-popover>
    <gd-icon-picker v-model="bindInputVal" v-model:virtualTriggerShow="isShowIcon"></gd-icon-picker>
    <view style="width: 100%; margin-top: 5px; text-align: center" v-show="bindContentType === 'CustomizeComp'">
      <gd-button text bg type="primary" @click="onClickOpenSourceCode">打开源码文件</gd-button>
    </view>
  </view>
</template>
<script>
  export default {
    inheritAttrs: false,
  };
</script>
<script setup>
  import { ref, toRefs, useAttrs, computed, watch, onMounted, unref } from "vue";
  import GdIcon from "@gd-accbuild-ui/gd-ui/gd-icon/gd-icon.vue";
  import { setContainerProps } from "@gd-accbuild-ui/gd-ui/gd-service/gd-container-service//gd-container-service";
  import { ideaTools } from "@gd-accbuild-core/config/utils";
  import { ClickOutside as vClickOutside } from "element-plus";
  import openDialogWhenCustomizeComp,{openSourceCodeFile} from "./openDialogWhenCustomizeComp";
  import { useStore } from "@gd-accbuild-core/store/hackVueStore";
  import { globalConfig } from "@gd-accbuild-core/config";
  const _store = useStore();
  const inputRef = ref(null);
  const popoverRef = ref(null);
  const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.();
  };
  const onFocus = () => {};
  const contentTypeOptions = [
    {
      label: "文本",
      value: "Text",
    },
    {
      label: "icon",
      value: "Icon",
    },
    {
      label: "自定义组件",
      value: "CustomizeComp",
    },
    {
      label: "原子组件",
      value: "AtomicComp",
    },
  ];
  const props = defineProps({
    disabledContentType: {
      type: Boolean,
      default: false,
    },
    modelValue: {
      type: Object,
      /* default: () => ({
      contentType: "Text",
      value: "",
    }), */
    },
    metaItemList: {
      type: Array,
      default: () => [],
    },
  });
  const emits = defineEmits(["update:modelValue"]);
  const bindInputVal = computed({
    get() {
      if (typeof props.modelValue === "object") {
        const v = props.modelValue.value;
        if (typeof v === "object") {
          return JSON.stringify(v);
        } else {
          return v;
        }
      } else {
        return "";
      }
    },
    set(value) {
      if (typeof props.modelValue === "object") {
        const v = props.modelValue.value;
        if (typeof v === typeof value || typeof value === "object") {
          props.modelValue.value = value;
        } else if (typeof v === "object" && typeof value === "string") {
          props.modelValue.value = JSON.parse(value);
        }
        emits("update:modelValue", props.modelValue);
      }
    },
  });
  const bindContentType = computed({
    get() {
      return props.modelValue.contentType;
    },
    set(value) {
      props.modelValue.contentType = value;
      if (["Text", "Icon", "AtomicComp"].includes(value)) {
        props.modelValue.value = "";
      } else {
        props.modelValue.value = {};
      }
      emits("update:modelValue", props.modelValue);
    },
  });
  const computedPrependWidth = computed(() => {
    if (bindContentType.value === "Icon") {
      return "80px";
    } else {
      return "40px";
    }
  });
  const bindFormData = computed({
    get() {
      if (typeof props.modelValue === "object") {
        const v = props.modelValue.value;
        if (typeof v === "object") {
          return v;
        } else {
          return {};
        }
      } else {
        return {};
      }
    },
    set(v) {
      if (typeof props.modelValue === "object") {
        props.modelValue.value = v;
        emits("update:modelValue", props.modelValue);
      }
    },
  });

  const isShowIcon = ref(false);
  const openDialog = async () => {
    if (bindContentType.value === "Icon") {
      isShowIcon.value = true;
      return;
    } else if (bindContentType.value === "CustomizeComp") {
      openDialogWhenCustomizeComp({ bindInputVal, _store });
      return;
    }
    setContainerProps({
      contentType: "Form",
      commonAttr: {
        key: "adv-config-dialog",
        labelWidth: "230px",
        //labelPosition: "top",//customizeOptionStyle
      },
      metaItemList: props.metaItemList,
      formData: bindFormData.value,
      containerAttr: {
        title: "高级配置",
      },
      onDoOperation: async ({ eventFrom, ...params }) => {},
      isShowContainer: false,
    });
    setContainerProps({
      isShowContainer: true,
    });
  };

  const onClickOpenSourceCode = () => {
    openSourceCodeFile({ bindInputVal, _store });
  };
  const onClear = () => {
    emits("update:modelValue", {
      contentType: "",
      value: "",
    });
  };
  const onChangeContentType = (v) => {
    emits("update:modelValue", {
      contentType: v,
      value: "",
    });
  };
</script>
<style lang="scss" scoped>
  .adv-strinput-container :deep(.el-input-group__prepend) {
    padding-right: 0;
  }
</style>
